import React,{useEffect, useState,useCallback} from 'react'
import { Search } from 'react-vant'
import axios from '../../service/index'
import {useNavigate,Outlet} from 'react-router-dom'
import './index.scss'


export default function Home() {
  const [type,setType] = useState([])
  const [selctedType,setSelctedType] = useState(null)
  const navigate = useNavigate()
  const typelist = useCallback(
    async () =>{
      let {data }= await axios.get('/type_list')
      if(data.code === 200){
        setType(data.data)
      }else{
        console.log('获取失败');
      }}
  ,[])

  const clothes=(id)=>{
    setSelctedType(id)
    navigate(`/home/clothes/${id}`)
  }
  useEffect(()=>{
   typelist()
  },[typelist])
  
  return (
    <div className='box'>
      <div className='box_wrapper'>
      <div className='title'>
          <h3>lativ诚衣</h3>
      </div>

      <div className='search'> 
      <Search  placeholder="请输入搜索关键词" onFocus={()=>navigate('/search')}/>
      </div>
      <div className='nav_list'>
          <ul>
            {
              type.map((item)=>{
                return <li key={item._id} onClick={()=>{clothes(item._id)}} className={selctedType === item._id ? 'selected' : ''}>
                  {item.name}
                </li>
              })
            }
          </ul>
      </div>
      </div>
      
      <div>
        <Outlet></Outlet>
      </div>
     
    </div>
  )
}
